{extend name="layout/layout" /}

{block name="header"}
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">{$title?$title:'商城'}</h1>
	</header>
{/block}

{block name="style"}
	<style>
		body{
			background: #fff;
		}

		.search{
			display: flex;
			font-size: 14px;
			padding: 20px 5px;
			background: #fff;
		}

		.search .input{
			flex: 1;
			
		}

		.search .input input{
			height: 40px;
			line-height: 40px;
			font-size: 14px;
			border: 1px solid #3385ff;
			border-radius: 4px 0 0 4px;
			margin: 0;
		}

		.search .btn{
			background: #3385ff;
			color: #fff;
			height: 40px;
			line-height: 40px;
			width: 100px;
			justify-content: center;
			text-align: center;
			border-radius: 0 4px 4px 0;
		}

		.tips{
			background: #fff;
			color: #999;
			padding: 0 10px;
			text-align: center;
		}
	</style>
{/block}

{block name="main"}
	<div class="order" v-cloak>
		<div class="search">
			<div class="input">
				<input type="text" v-model="order_no" placeholder="请输入淘宝订单号" />
			</div>
			<div class="btn" @tap='search()'>提交订单</div>
		</div>
		
		<div class="tips">如果你的订单未找到，请把淘宝订单号复制到此匹配</div>
	</div>
{/block}

{block name="navbar"}{/block}

{block name="script"}
	<script>
			

		var detailVue = new Vue({
			el: '.order',
			data: {
				order_no: ''
			},
			mounted: function(){
			},
			methods:{
				//获取订单列表
				search: function(){
					var order_no = this.order_no;
					if(!order_no){
						mui.toast('请输入淘宝订单号');return;
					}

					layer.open({
						type:2,
						shadeClose: false
					});

					var that = this;
					var url =  'tbk/pregOrder';
					request(that, {'url': url, 'data': {
					  	"order_no": that.order_no,
					}}, function(res){
						layer.closeAll();
						mui.toast(res.msg);
					});
				}
			}
		});
	</script>
{/block}